<template>
  <div class="project">
    <div class="search">
      <div class="box1">
        <div>筛选查询</div>
        <div @click='searchclick()'>查询结果</div>
      </div>
      <div class="box2">
         <span>项目状态：</span><select name="" id="" :v-model="item" @change='selectValue($event.target.value)'>
            <option value="所有">所有</option>
            <option value="进行中">进行中</option>
            <option value="已延期">已延期</option>
            <option value="已完成">已完成</option>
         </select>
      </div>
    </div>
    <div class="header">
      <div>数据列表</div>
      <div @click="add(item)">新增</div>
    </div>
    <el-table
      :data="tableData.list"
      border
      style="font-size: 12px"
      :cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column
        prop="projectNum"
        label="项目编号"
        width="180"
        header-align="center"
      />
      <el-table-column
        prop="projectName"
        label="项目名称"
        header-align="center"
      />
      <el-table-column
        prop="projectManager"
        label="项目负责人"
        header-align="center"
      />
      <el-table-column
        prop="projectStage"
        label="当前阶段"
        header-align="center"
      />
      <el-table-column
        prop="projectState"
        label="项目状态"
        header-align="center"
      />
      <el-table-column
        prop="startDate"
        label="开始日期"
        header-align="center"
      />
      <el-table-column prop="id" label="操作" header-align="center">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click.prevent="deleteRow(scope.row)"
            >删除</el-button
          >
          <el-button
            link
            type="primary"
            size="small"
            @click.prevent="editRow(scope.row)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>


import { onMounted, reactive, ref } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";





var router = useRouter();

var tableData = reactive({ list: [] });

var searchkey = ref('进行中')





onMounted(() => {
  axios.get("/api/projectManage/list").then((res) => {
    tableData.list = res.data.list;
  });
});

var deleteRow = (row) => {
  axios
    .post("/api/projectManage/delete", { projectNum: row.projectNum })
    .then((res) => {
      tableData.list = res.data.list;
    });
};


var editRow = (row) => {
  router.push({
    path: "/index/projectInfo",
    query: row,
  });
};
var add = (item)=>{
        router.push({
        path:'/index/projectadd',
});
}

var selectValue = (val)=>{
    searchkey.value = val
}



var searchclick = ()=>{
     axios.post('/api/projectManage/search', {key:searchkey.value}).then((res) => {
        if(res.data.list.length == 0){
            alert('未查询到结果')
        }
            tableData.list = res.data.list;
        })
    }


</script>

<style scoped>
.search {
  font-size: 12px;
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: column;
  margin-bottom: 50px;
  border:1px solid #f5f5f5
}
.search .box1 {
  height: 50%;
  background-color: #f5f5f5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search .box2 {
  height: 50%;
  display: flex;
  align-items: center;

}
.search .box1 div:nth-child(1) {
  line-height: 50px;
  margin-left: 50px;
}
.search .box1 div:nth-child(2) {
  line-height: 30px;
  width: 60px;
  height: 30px;
  background-color: white;
  color: #63b9be;
  text-align: center;
  margin-right: 50px;
}
.search .box1 div:nth-child(2):hover{
    background-color:#63B9BE;
    color: white;
}
.search .box2  span{
    margin-left: 50px;
}

.search .box2 select{
    width: 140px;
    height: 30px;
    border:2px solid #999;
}



.header {
  font-size: 12px;
  width: 100%;
  height: 50px;
  background-color: #f5f5f5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header div:nth-child(1) {
  line-height: 50px;
  margin-left: 50px;
}
.header div:nth-child(2) {
  line-height: 30px;
  width: 60px;
  height: 30px;
  background-color: white;
  color: #63b9be;
  text-align: center;
  margin-right: 50px;
}
.header div:nth-child(2):hover{
    background-color:#63B9BE;
    color: white;
}
.el-input{
    width: 140px;
    height: 40px;

}
</style>